<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>万里云平台 -- 打印模版设计</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../../static/font-awesome-4.7.0/css/font-awesome.min.css" >
	<link rel="stylesheet" href="../../../static/jquery-ui-1.12.1/jquery-ui.min.css" >
	<link rel="stylesheet" href="../../../static/css/print/print_add.css" >
	<script type="text/javascript" src="../../../static/js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="../../../static/layer/layer.js"></script>
	<script type="text/javascript" src="../../../static/js/common.js"></script>
	<style type="text/css">
		ul{
			background: none;
			border: none;
			outline: none;
			margin: 0;
			padding: 0;
			list-style: none;
		}

		#fonts,#fontStyle,#fontSize{
			height: 135px;
			overflow: auto;
			border: 1px solid #828790;
			cursor: default;
			background-color: #fff;
		}
	</style>
</head>
<body style="background: #F0F0F0;font-size: 13px;">

	<div style="position: relative;">
		<div>
			<ul style="width: 170px;position: absolute;top:15px;left:15px;">
				<li>字体</li>
				<li><input type="text" readonly="readonly" style="width:167px;"/></li>
				<li>
					<ul id="fonts"></ul>
				</li>
			</ul>
			<ul style="width: 170px;position: absolute;top:15px;left:195px;">
				<li>样式</li>
				<li><input type="text" readonly="readonly" style="width:167px;"/></li>
				<li>
					<ul id="fontStyle"></ul>
				</li>
			</ul>
			<ul style="width: 66px;position: absolute;top:15px;left:376px;">
				<li>大小</li>
				<li><input type="text" readonly="readonly" style="width:63px;"/></li>
				<li>
					<ul id="fontSize"></ul>
				</li>
			</ul>
		</div>

		<div style="width: 170px;position: absolute;top:200px;left:15px;">
			<fieldset>
				<legend>效果</legend>
				<span><input type="checkbox" id="deleteLine">删除线</span><br>
				<span><input type="checkbox" id="lowLine">下划线</span>
			</fieldset>
		</div>

		<div style="width: 240px;position: absolute;top:200px;left:195px;    text-align: center;">
			<fieldset style="height: 200px;">
				<legend>示例</legend>
				<span id="demo">进销存软件</span>
			</fieldset>
		</div>

	</div>
<script>
	var fonts = ['Calibri','Cambria','Cambria Math','Consolas','Georgia','Microsoft YaHei UI',
		'MT Extra','Segoe MDL2 Assets','Segoe UI Emoji','Segoe UI Symbol','SimSun-ExtB',
		'Symbol','Verdana','Webdings','Wingdings','Wingdings 2','Wingdings 3','等线',
		'方正兰亭超细黑简体','仿宋','黑体','楷体','宋体','微软雅黑','新宋体'];
	var fontStyle = [
		{css:{"font-weight":"normal","font-style":"normal"},text:'常规'},
		{css:{"font-weight":"normal","font-style":"italic"},text:'倾斜'},
		{css:{"font-weight":"bold","font-style":"normal"},text:'粗体'},
		{css:{"font-weight":"bold","font-style":"italic"},text:'粗体 倾斜'}];
	var fontSize = [{value:8,text:'8'},{value:9,text:'9'},{value:10,text:'10'},{value:11,text:'11'},{value:12,text:'12'},{value:14,text:'14'},{value:16,text:'16'},{value:18,text:'18'},
		{value:20,text:'20'},{value:22,text:'22'},{value:24,text:'24'},{value:26,text:'26'},{value:28,text:'28'},{value:36,text:'36'},{value:48,text:'48'},{value:72,text:'72'},
		{value:56,text:'初号'},{value:48,text:'小初'},{value:35,text:'一号'},{value:32,text:'小一'},{value:29,text:'二号'},{value:24,text:'小二'},{value:21,text:'三号'},
		{value:20,text:'小三'},{value:19,text:'四号'},{value:16,text:'小四'},{value:14,text:'五号'},{value:12,text:'小五'},{value:10,text:'六号'},{value:9,text:'小六'},
		{value:7,text:'七号'},{value:7,text:'八号'}]

	$(function () {
		for( var i=0 ; i<fonts.length ; i++ ){
			$('#fonts').append('<li select="0" v="'+fonts[i]+'">'+fonts[i]+'</li>');
		}
		for( var i=0 ; i<fontStyle.length ; i++ ){
			var li = $('<li select="0">'+fontStyle[i].text+'</li>');
			li.data(fontStyle[i].css);
			$('#fontStyle').append(li);
		}
		for( var i=0 ; i<fontSize.length ; i++ ){
			$('#fontSize').append('<li select="0" v="'+fontSize[i].value+'">'+fontSize[i].text+'</li>');
		}

		//set font data start
		var defaultCss = top.font;
		//$('#demo').css(defaultCss);
		//{"font-family": "宋体","font-weight": "normal","font-style": "normal","font-size": "11px","text-decoration":"none"}
		liclick($('#fonts li[v="'+defaultCss[0]+'"]'));
		$('#fonts').scrollTop(getFontsScroll(defaultCss[0],fonts));
		liclick($('#fontSize li[v="'+defaultCss[3]+'"]'));
		$('#fontSize').scrollTop(getFontsScroll(defaultCss[3],fontSize));

		if( defaultCss[4] == 'underline' ){
			$('#lowLine').prop('checked',true);
			checkclick($('#lowLine'))
		}else if( defaultCss[4] == 'line-through' ){
			$('#deleteLine').prop('checked',true);
			checkclick($('#deleteLine'))
		}

		if( defaultCss[1] == 'normal' && defaultCss[2] == 'normal' ){
			liclick($('#fontStyle li').eq(0));
		}else if( defaultCss[1] == 'normal' && defaultCss[2] == 'italic' ){
			liclick($('#fontStyle li').eq(1));
		}else if( defaultCss[1] == 'bold' && defaultCss[2] == 'normal' ){
			liclick($('#fontStyle li').eq(2));
		}else if( defaultCss[1] == 'bold' && defaultCss[2] == 'italic' ){
			liclick($('#fontStyle li').eq(3));
		}

		//set font data end

		$('#deleteLine,#lowLine').click(function () {
			checkclick($(this));
		});

		$('#fonts li,#fontStyle li,#fontSize li').click(function () {
			liclick($(this));
		});

		function checkclick(_this) {
			var id = _this[0].id;
			if( id == 'deleteLine' ){
				var isCheck = $('#deleteLine').is(':checked');
				$('#lowLine').attr('checked',false);
				if(isCheck){
					$('#demo').css({"text-decoration": "line-through"});
				}else{
					$('#demo').css({"text-decoration": "none"});
				}

			}else if( id == 'lowLine' ){
				var isCheck = $('#lowLine').is(':checked');
				$('#deleteLine').attr('checked',false);
				if(isCheck){
					$('#demo').css({"text-decoration": "underline"});
				}else{
					$('#demo').css({"text-decoration": "none"});
				}
			}
		}

		function liclick(_this) {
			var ul = _this.parent();
			var ulId = ul[0].id;
			ul.find('li').attr('select','0').css({"background-color":"#ffffff","color":"#000000"});
			_this.attr('select','1').css({"background-color":"#0078D7","color":"#ffffff"});

			ul.parent().parent().find('input').val(_this.html());

			if( ulId == 'fonts' ){
				$('#demo').css({"font-family":_this.attr('v')});
			}else if(ulId == 'fontStyle'){
				$('#demo').css(_this.data());
			}else if(ulId == 'fontSize'){
				$('#demo').css({"font-size":_this.attr('v')+"px"});
			}
		}

        app.getOkBtn().click(function() {
            // css:["宋体","normal","normal",11,"none"]
			//{"font-family": "宋体","font-weight": "normal","font-style": "normal","font-size": "11px","text-decoration":"none"}
			var family = $('#fonts li[select="1"]').attr('v');
			var weight = 'normal',style='normal';
			$('#fontStyle li').each(function (i,ele) {
				if( $(ele).attr('select') == '1' ){
                    var eleData = $(ele).data();
                    weight = eleData["font-weight"];
                    style = eleData["font-style"];
				}
            });
			var size = $('#fontSize li[select="1"]').attr('v');
			var decoration = 'none',decorationText="无";
            var isCheck = $('#deleteLine').is(':checked');
            if( isCheck ){
                decoration = 'line-through';decorationText='删除线';
			}
            isCheck = $('#lowLine').is(':checked');
            if( isCheck ){
                decoration = 'underline';decorationText='下划线';
            }

            var text = '字体['+family+'],字形['+$('#fontStyle li[select="1"]').html()+'],大小['+size+'] 效果['+decorationText+']';
            top.getTargetWindow().setSelectedValue(app.getRequestParams().name,[family,weight,style,size,decoration,text]);

            $('input[edit="font"]',top.getTargetWindow().document).val(text);

            app.closeLastWindow();

        });

	});


	function getFontsScroll(value,arr) {
		var index = 0;
		for( var i=0 ; i<arr.length ; i++ ){
			if( value == arr[i] ){
				index = i;
				break;
			}
		}
		return Math.floor( index / 8 ) * 135;
	}

</script>

</body>
</html>